<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="isolateScope">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <!--
        在继承作用域中，我们可以选择子作用域直接操作父作用域数据来实现父子作用域的通信，
        而在独立作用域中，子作用域不能直接访问和修改父作用域的属性和值。
        为了能够使孤立作用域也能和外界通信，AngularJS 提供了三种方式用来打破独立作用域“孤立”这一限制。
    -->


    <!-- 实例七： 单向绑定示例
        这是 AngularJS 独立作用域与外界父作用域进行数据通信中最简单的一种，
        绑定的对象只能是父作用域中的字符串值，并且为单向只读引用，
        无法对父作用域中的字符串值进行修改，此外，这个字符串还必须在父作用域的 HTML 节点中以 attr（属性）的方式声明。
     -->
    <div ng-controller="ctrl">
        <button>{{btns}}</button>
        <div isolate-directive isolates="{{btns}}"></div>
    </div>

    <script>
        /*
        * 通过在 directive 中声明了 scope:{isolates:'@'} 使得 directive 拥有了父作用域中 isolates这个 HTML 属性所拥有的值，
        *    这个值在控制器 ctrl 中被赋值为'nick'。所以，代码的运行结果是页面上有两个名为 nick的按钮。
        *
        * */
        angular.module('isolateScope', [])
            .controller("ctrl", function ($scope) {/* 父作用域 */
                $scope.btns = 'NICK';
            })
            .directive("isolateDirective", function () {/* 子作用域可以读取父作用域 */
                return {
                    replace : true,
                    template: '<button>{{isolates}}</button>',
                    scope : {
                        isolates : '@',
                    },
                    link : function($scope, $element, $attr) {
                        $scope.isolates = "DeveloperWorks";//无效
                    }
                };
            })

    </script>
</body>
</html>